<template>
  <div class="tzl_test">
    <!-- upload -->
    <div v-if="showType === 'upload'">
      <h5>Upload</h5>
      <h6>Upload 基础组件</h6>
      <upload-base ref="baseRef" v-model="fileBaseList"></upload-base>

      <h6>Upload 按钮+list展示 用于form 添加附件</h6>
      <upload-button
        ref="buttonRef"
        v-model="fileButtonList"
        accept=".pdf"
        :limit="2"
      ></upload-button>

      <h6>Upload 拖拽上传：用于excel导入</h6>
      <upload-drag ref="buttonRef" :drag="true" v-model="fileDragList" accept="application/pdf">
      </upload-drag>

      <h6>Upload link，可替换上传内容：用于table单元格上传</h6>
      <upload-link ref="buttonRef" v-model="fileLinkList" accept="application/pdf"></upload-link>

      <h6>Upload 图片上传</h6>
      <upload-image :drag="true" v-model="fileImageList"></upload-image>
      <el-button class="get_file" @click="getFileList">附件值打印</el-button>
    </div>

    <div v-if="showType === 'editor'">
      <h5>富文本编辑器</h5>
      <h6>富文本编辑器</h6>
      <editor-base v-model="eidtValue"></editor-base>
      <el-button class="get_file" @click="getEditorValue">富文本编辑器值打印</el-button>
    </div>
  </div>
</template>

<script setup>
import UploadBase from '@/components/upload/UploadBase.vue';
import UploadButton from '@/components/upload/UploadButton.vue';
import UploadDrag from '@/components/upload/UploadDrag.vue';
import UploadLink from '@/components/upload/UploadLink.vue';
import UploadImage from '@/components/upload/UploadImage.vue';

import EditorBase from '@/components/text-editor/EditorBase.vue';

const showType = $ref('upload');

const fileBaseList = $ref([]);
const fileButtonList = $ref([]);
const fileDragList = $ref([]);
const fileLinkList = $ref([]);
const fileImageList = $ref([]);

const eidtValue = $ref('');

const scope = $ref({
  row: {
    options: [
      { label: '1', value: '1' },
      { label: '2', value: '2' },
    ],
  },
});

function getFileList() {
  console.log(fileBaseList, 'pload 基础组件 list');
  console.log(fileButtonList, 'Upload 按钮+list展示 list');
  console.log(fileDragList, 'Upload 拖拽上传：用于导入');
  console.log(fileLinkList, 'Upload 拖拽上传：用于导入');
  console.log(fileImageList, 'Upload 图片上传');
}

function getEditorValue() {
  console.log(eidtValue, 'eidtValueeidtValue');
}
function itemEvent(scoped) {
  // console.log(scoped, 'itemEvent');
}
</script>
<style lang="scss" scoped>
h5 {
  font-size: 16px;
}
h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  padding-left: 6px;
}
h6::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 15px;
  display: block;
  background: #409eff;
  top: 2px;
  left: 0;
}
.tzl_test {
  margin: 20px;
}
.get_file {
  margin: 20px;
}
.form_item {
  > div {
    margin-bottom: 20px;
  }
}
</style>
